import { defineComponent, ref, h } from 'vue'
import Vue3Signature from "vue3-signature"
import 'element-plus/dist/index.css';

import './style.scss'
import myMeta from './meta'

export const meta = myMeta
/**
 * 支持配置：
 * 内容限制格式，valid
 * 字数限制，textRange
 * 引导提示文案，placeholder
 */
export default defineComponent({
  name: 'SignatureModule',
  props: {
    type: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请填写'
    },

    valid: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  emits: ['blur', 'focus', 'input', 'change'],
  setup(props, { emit }) {
    const focusFlag = ref(false)
    const signaturePad = ref()
    let options = ref({
      penColor: '#000000',
      backgroundColor: "#f1f2f3",
      borderRadius: 8,
      minWidth: 1,
      maxWidth: 1,
      dotSize: 1
    })

    const clearSignature = () => {
      // 撤销返回上一步
      // signaturePad.value.undo()
      // console.log(signaturePad.value)

      // 直接清空
      signaturePad.value.clear()
    }
    const updateSignature = () => {
      const response = signaturePad.value.save()
      // console.log(response)
      const key = props.field
      if (signaturePad.value?.isEmpty()) { 
        emit('change', {
          key,
          value: ''
        })
      } else {
        const binaryData = convertBase64ToBinary(response)
        const blob = new Blob([binaryData], { type: 'image/png' })
        console.log(blob)
        emit('change', {
          key,
          value: response
        })
        // window.$ui.msg('签名成功')
      }
    }
    const onChange = (data) => {
      console.log(data)
    }
    const convertBase64ToBinary = (base64Str) => {
      // 去除data:image/png;base64,这部分，只保留base64编码的字符串
      const binaryStr = atob(base64Str.split(',')[1])

      const len = binaryStr.length
      const bytes = new Uint8Array(len)
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i)
      }
      // 返回Unit8Array对象
      return bytes
    }

    const fromDataURL = () => {
      signaturePad.value.fromDataURL(props.value);
    }

    return {
      props,
      focusFlag,
      updateSignature,
      onChange,
      options,
      clearSignature,
      fromDataURL,
      signaturePad
    }
  },
  render() {
    const { options, clearSignature, updateSignature, props } = this
    console.log(props)
    if (props.readonly) {
      return (
        <div class="signaturePad">
          <img src={props.value} alt="" />
        </div>
      )
    }
    return (
      <div>
        <Vue3Signature ref={el => this.signaturePad = el} class="signaturePad" sigOption={options} w="100%" h="180px" onEnd={updateSignature} />
        <div class="signbtn-group">
           <a class="signbtn" onClick={clearSignature}>清除签名</a>
        </div>
      </div>
    )
  }
})
